import {designPage, reactive} from "plain-design-composition";
import {Button, Dialog, Input} from "../../../../packages";
import {DemoRow} from "../../Demo/DemoRow";
import {delay} from "plain-utils/utils/delay";
import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';

export const demo1 = designPage(() => {
  const state = reactive({ show: false });
  return () => (
    <>
      <DemoRow title="基本用法">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300">
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});
export const demo2 = designPage(() => {
  const state = reactive({
    show: false,
    show1: false,
    show2: false,
  });
  return () => (
    <>
      <DemoRow title="弹框尺寸">
        <Button label="设置宽高400*300" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} height={300} width={400} title="内容可编辑">
          <div contentEditable={true}>
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
          </div>
        </Dialog>

        <Button label="设置最小宽高400*300" onClick={() => state.show1 = !state.show1}/>
        <Dialog v-model={state.show1} minHeight={300} minWidth={400} title="内容可编辑">
          <div contentEditable={true}>
            <div>桃花坞里桃花庵；</div>
            <div>桃花庵里桃花仙；</div>
            <div>桃花仙人种桃树；</div>
            <div>又摘桃花换酒钱；</div>
          </div>
        </Dialog>

        <Button label="设置最大宽高400*300" onClick={() => state.show2 = !state.show2}/>
        <Dialog v-model={state.show2} maxHeight={300} maxWidth={400} title="内容可编辑">
          <div contentEditable={true}>
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
            桃花坞里桃花庵；
            桃花庵里桃花仙；
            桃花仙人种桃树；
            又摘桃花换酒钱；
          </div>
        </Dialog>
      </DemoRow>
    </>
  );
});

export const demo3 = designPage(() => {
  const state = reactive({
    show: false,
    show2: false,
    show3: false,
  });
  return () => (
    <>
      <DemoRow title="操作按钮">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300" confirmButton cancelButton onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>

        <Button label="居中" onClick={() => state.show2 = !state.show2}/>
        <Dialog v-model={state.show2} minWidth="300" confirmButton cancelButton headAlign="center" contentAlign="center" footAlign="center" onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>

        <Button label="额外按钮" onClick={() => state.show3 = !state.show3}/>
        <Dialog v-model={state.show3} minWidth="300" confirmButton cancelButton headAlign="center" contentAlign="center" footAlign="center" onConfirm={() => console.log('confirm')} onCancel={() => console.log('cancel')}>
          {{
            default: () => <>
              <div>桃花坞里桃花庵；</div>
              <div>桃花庵里桃花仙；</div>
              <div>桃花仙人种桃树；</div>
              <div>又摘桃花换酒钱；</div>
            </>,
            foot: () => <>
              <Button label="自定义按钮" style={{ order: 5, }}/>
            </>
          }}
        </Dialog>
      </DemoRow>
    </>
  );
});

export const demo4 = designPage(() => {
  const state = reactive({ show: false });
  return () => (
    <>
      <DemoRow title="去掉内容内边距">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} noContentPadding minWidth="300">
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});
export const demo5 = designPage(() => {
  const state = reactive({ show: false, show2: false });
  return () => (
    <>
      <DemoRow title="自定义标题">
        <Button label="自定义标题栏" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300">
          {{
            default: () => <>
              <div>桃花坞里桃花庵；</div>
              <div>桃花庵里桃花仙；</div>
              <div>桃花仙人种桃树；</div>
              <div>又摘桃花换酒钱；</div>
            </>,
            head: () => <>
              <InfoCircleOutlined style={{ marginRight: '4px' }}/>
              <span>系统提示</span>
            </>
          }}
        </Dialog>

        <Button label="无标题栏" onClick={() => state.show2 = !state.show2}/>
        <Dialog v-model={state.show2} minWidth="300" noHead contentAlign="center">
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});


export const demo6 = designPage(() => {
  const state = reactive({ show: false });
  return () => (
    <>
      <DemoRow title="去掉关闭按钮">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300" noClose>
          {{
            default: () => <>
              <div>桃花坞里桃花庵；</div>
              <div>桃花庵里桃花仙；</div>
              <div>桃花仙人种桃树；</div>
              <div>又摘桃花换酒钱；</div>
            </>,
            head: () => <>
              <InfoCircleOutlined style={{ marginRight: '4px' }}/>
              <span>系统提示</span>
            </>
          }}
        </Dialog>
      </DemoRow>
    </>
  );
});


export const demo7 = designPage(() => {
  const state = reactive({ show: false });
  return () => (
    <>
      <DemoRow title="全屏弹框">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} fullscreen>
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});
export const demo8 = designPage(() => {
  const state = reactive({ show: false });
  return () => (
    <>
      <DemoRow title="无遮罩">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} noMask minWidth={300}>
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});

export const demo9 = designPage(() => {
  const state = reactive({ show: false });
  return () => (
    <>
      <DemoRow title="继承属性">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} noMask minWidth={300} className="my-dialog" data-id="hello">
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});
export const demo10 = designPage(() => {
  const state = reactive({ show: false, open: false });
  return () => (
    <>
      <DemoRow title="绑定open">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Button label={state.open ? 'open' : 'close'}/>
        <Dialog
          v-model={state.show}
          v-model:open={state.open}
          minWidth={300} className="my-dialog" data-id="hello">
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});


export const demo10_1 = designPage(() => {
  const state = reactive({ show1: false, show2: false });
  return () => (
    <>
      <DemoRow title="关闭按钮类型">
        <Button label="square" onClick={() => state.show1 = !state.show1}/>
        <Dialog v-model={state.show1} minWidth={300} closeType="square">
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>

        <Button label="triangle" onClick={() => state.show2 = !state.show2}/>
        <Dialog v-model={state.show2} minWidth={300} closeType="triangle">
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});

export const demo11 = designPage(() => {
  const state = reactive({ show: false, show2: false, show3: false, });
  return () => (
    <>
      <DemoRow title="关闭时销毁内容实例">
        <p>比如弹框内是一个带查询表单的数据表格，查询表单的查询参数有数据表格组件自己管理。</p>
        <p>关闭时销毁会导致每次打开，数据表格的查询参数都会重置</p>
        <p>不销毁则，每次打开状态停留在上次关闭的状态</p>
        <Button label="关闭时销毁内容实例" onClick={() => state.show = !state.show}/>
        <Dialog
          v-model={state.show}
          destroyOnClose
          minWidth={300}
        >
          <Input modelValue="hello world"/>
        </Dialog>
        <Button label="关闭时不销毁内容实例（默认）" onClick={() => state.show2 = !state.show2}/>
        <Dialog
          v-model={state.show2}
          minWidth={300}
        >
          <Input modelValue="hello world2"/>
        </Dialog>

        <Button label="立即初始化弹框内容（SEO）" onClick={() => state.show3 = !state.show3}/>
        <Dialog
          v-model={state.show3}
          minWidth={300}
          className="my-dialog-1"
          data-id="my-dialog-1"
          initialize
        >
          <Input modelValue="hello world2"/>
        </Dialog>
      </DemoRow>
    </>
  );
});

export const demo12 = designPage(() => {
  const state = reactive({ show: false, loading: false });
  return () => (
    <>
      <DemoRow title="加载状态">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300" loading={state.loading} footAlign="center" headAlign="center" contentAlign="center">
          {{
            default: () => <>
              <div>桃花坞里桃花庵；</div>
              <div>桃花庵里桃花仙；</div>
              <div>桃花仙人种桃树；</div>
              <div>又摘桃花换酒钱；</div>
            </>,
            foot: () => (
              <Button label="open loading 3s" type="primary" asyncHandler={async () => {
                state.loading = true;
                await delay(3000);
                state.loading = false;
              }}/>
            ),
          }}
        </Dialog>
      </DemoRow>
    </>
  );
});
export const demo13 = designPage(() => {
  const state = reactive({
    show: false,
    text: ''
  });

  const handleConfirm = async (close: () => void) => {
    await delay(2000);
    if (!state.text) {
      const msg = '请输入文本！';
      alert(msg);
      throw new Error(msg);
    }
  };

  return () => (
    <>
      <DemoRow title="异步确认">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300" handleConfirm={handleConfirm} confirmButton cancelButton>
          <Input v-model={state.text}/>
        </Dialog>
      </DemoRow>
    </>
  );
});

export const demo14 = designPage(() => {
  const state = reactive({ show: false, show2: false });
  return () => (
    <>
      <DemoRow title="多个弹框">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300">
          <Button label="打开弹框" onClick={() => state.show2 = !state.show2}/>
        </Dialog>
        <Dialog v-model={state.show2} minWidth="300">
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});


export const demo15 = designPage(() => {
  const state = reactive({ show: false, text: '' });

  const handleConfirm = async (close: () => void) => {
    await delay(2000);
    if (!state.text) {
      const msg = '请输入文本！';
      alert(msg);
      throw new Error(msg);
    }
  };

  const handleCancel = async (close: () => void) => {
    await delay(2000);
    if (!state.text) {
      if (!confirm('确定要取消吗？')) {
        return Promise.reject('stop cancel!');
      }
    }
  };

  return () => (
    <>
      <DemoRow title="完全控制确认以及取消动作">
        <p>用户可以通过enter按键触发确定以及esc按键触发取消动作，所以要完全控制用户的行为，仅仅去掉确认按钮、取消按钮、关闭按钮是不够的。</p>
        <p>需要在handleConfirm以及handleCancel中处理，如果不允许关闭，请返回Promise.reject或者抛出异常</p>
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300" handleConfirm={handleConfirm} handleCancel={handleCancel} confirmButton cancelButton>
          <Input v-model={state.text}/>
        </Dialog>
      </DemoRow>
    </>
  );
});


export const demo16 = designPage(() => {
  const state = reactive({ val: {} as any });
  return () => (
    <>
      <DemoRow title="弹框位置">
        <p>类似于抽屉组件Drawer</p>
        {['top', 'left', 'right', 'bottom'].map(position => (
          <Button key={position} label={position.toUpperCase()} onClick={() => state.val[position] = !state.val[position]}/>
        ))}
        {(['top', 'left', 'right', 'bottom'] as const).map(position => (
          <Dialog key={position} v-model={state.val[position]} width={position === 'left' || position == 'right' ? 300 : undefined} position={position} confirmButton cancelButton>
            {{
              default: () => <>
                <div>桃花坞里桃花庵；</div>
                <div>桃花庵里桃花仙；</div>
                <div>桃花仙人种桃树；</div>
                <div>又摘桃花换酒钱；</div>
              </>,
              foot: () => <>
                <Button label="external" style={{ order: 5 }}/>
              </>
            }}
          </Dialog>
        ))}
      </DemoRow>
    </>
  );
});

export const demo17 = designPage(() => {
  const state = reactive({ show: false });
  return () => (
    <>
      <DemoRow title="可拖拽弹框">
        <Button label="打开弹框" onClick={() => state.show = !state.show}/>
        <Dialog v-model={state.show} minWidth="300" movable>
          <div>桃花坞里桃花庵；</div>
          <div>桃花庵里桃花仙；</div>
          <div>桃花仙人种桃树；</div>
          <div>又摘桃花换酒钱；</div>
        </Dialog>
      </DemoRow>
    </>
  );
});
